<template>
  <div class="register">
    <mtHeader
      fixed
      style="background: none;height:1rem"
    >
        <div class="header-left iconfont" slot="left" @click="$router.back(-1)">&#xe623;</div>
    </mtHeader>
    <div class="container">
        <div class="cen">
            <p class="con-tit">注册</p>
            <input class="con-phone" placeholder="请输入手机号码" v-model="phone"/>
            <div class="con-code">
                <input class="con-c1" placeholder="请输入验证码" v-model="sendCode"/>
                <dButton v-on:obtain="obtainYZM"></dButton>
            </div>
            <input placeholder="请设置6-12位密码" class="con-password" v-model="password"/>
            <div class="con-agreement">
                <div class="agreement-img" v-show="select" @click="changeSelect">
                    <img src="/static/img/check.png" alt="">
                </div>
                <div class="agreement-bor" v-show="!select"  @click="changeSelect"></div>
                <p class="agreement-cn1">已阅读并同意</p>
                <p class="agreement-cn2">用户服务协议</p>
                 <p class="agreement-cn1">及</p>
                <p class="agreement-cn2">隐私协议</p>
            </div>
            <!-- <button class="btnLogin" @click="btnRegister">立即注册</button> -->
            <mt-button type="default" size="large"  @click="btnRegister" style="width: 100%;
              margin-top: 1.27rem;
              height: 0.9rem;
              line-height: 0.9rem;
              text-align: center;
              color: #fff;
              background: #FAB52F;
              font-size: 0.3rem;
              font-weight: 600;
              letter-spacing: 2px;"
            >立即注册</mt-button>
        </div>
        
    </div>
  </div>
</template>
<script>
import { Header,Button } from "mint-ui";
import dButton from '../../../components/dButton'
import {phoneRegisterYZM,getCurrentTime,phoneRegisterByMobile} from '@/request/api';
import { Toast } from 'mint-ui'

export default {
  name: "register",
  components: {
    mtHeader: Header,
    dButton,
    mtButton:Button
  },
  data: function() {
    return {
      phone:null,
      sendCode:null,
      password:null,
      select:true,
      cfrom:'web',
      version:'1',
      channel:'yueqiuH5'
    };
  },
  methods: {
    submit(){

    },
   changeSelect(){
       this.select=!this.select;
   },
  // 发送验证码
   obtainYZM(){
      let t = this,smstoken=''
      let regphone=/^1(3|4|5|7|8)\d{9}$/
      if(!regphone.test(this.phone)){
        Toast("请输入正确的手机号")
          return
      }
     getCurrentTime().then(function(res){
        if(res.status!=="_0000"){
          return
        }
        let token=res.data
        smstoken= t.encryptDes(token);
      }).then(function(){
        phoneRegisterYZM({"phone":t.phone,"smstoken":smstoken,'cfrom':t.cfrom,"version":t.version,"channel":t.channel}).then(function(res) {
          if(res.status!=="_0000"){
            return
          }
        })
        .catch(function (error) {
          Toast(error);
        });   
      }) .catch(function (error) {
	       Toast(error);
      }); 
   },
    // 注册
    btnRegister(){
      let t = this
      let regphone=/^1(3|4|5|7|8)\d{9}$/
      let reg = new RegExp(/^[0-9a-zA-Z_]{6,12}$/)
      if(!regphone.test(this.phone)){
        Toast("请输入正确的手机号")
          return
      }
      if(!reg.test(this.password)){
        Toast("请输入6-12位密码")
          return
      }
      if(!this.select){
        Toast("请先同意用户协议")
        return;
      } 
      let password=this.$md5(this.password)
      phoneRegisterByMobile({"phone":this.phone,"vphone":this.sendCode,"password":password,'cfrom':this.cfrom,"version":this.version,"channel":this.channel}).then(function(res) {
        if(res.status!=="_0000"){
          Toast("注册失败")
          return
        }
        Toast("注册成功")
        setTimeout(() => {
          t.$router.go(-1)
        }, 1000);
	    })
      .catch(function (error) {
	       Toast(error);
      });
    }
  },
  mounted(){
    // console.log(this.encryptDes)
    
  }
};
</script>
<style lang="less" scoped>
@import url('~styles/common.less');
</style>